<!--消息 
此页面未正常聊天；需求更改为按订单聊天；此页面作废
-->
<template>
	<div class="contact flex" id="information">
		<audio id="chatfAudio" ref="chatfAudios" autoplay @ended="chatfAudioendfun()" v-if="audioac">
			<source :src="apifun.URLimg + audioac">
		</audio>
		<div class="information">
			<div class="topfixed">
				<div class="infosearch marginAuto">
					<el-input class="infosearch-input" @change="getfriend" v-model="searchtxt" prefix-icon="el-icon-search"
						placeholder="搜索"></el-input>
				</div>
			</div>
			<div class="infoblock" >
				<!-- 公告START -->
				<div class="infoeach curpoin flex"
					@click="noticefun()"
					:class="isnotice ? 'activeinfoeach':''">
					<div class="infoeachl" style="display:flex;background-color:#fff;border-radius:5px;">
						 <img style="width:16px;height:18px;border-radius:10px;margin:auto;" src="@/assets/chat/notice.png" alt="头像" />
					</div>
					<div class="infoeachr">
						<p class="infoeachr-name ellipsis01" style="line-height:40px;">系统公告</p>
					</div>
				</div>
				<!-- 公告END -->
				<div class="infoeach curpoin flex" 
					v-for="(item,index) in infodata" :key="index"
					@click="infosefun(item,index)"
					v-if="item.type != 'new_order'"
					:class="infodataac == item.user_id ? 'activeinfoeach':''">
					<div class="infoeachl">
						 <el-image class="infoeachl-p" style="width:40px;height:40px;border-radius:10px;" :src="apifun.URLimg+item.avatar" fit="cover">
						 	<div slot="error" class="image-slot">
						 	    <img style="width:40px;height:40px;border-radius:10px;" v-if="!item.avatar" src="@/assets/logosvg.png" alt="头像" />
								<img style="width:40px;height:40px;border-radius:10px;" v-if="item.avatar" :src="apifun.URLimg + item.avatar" alt="头像" />
						 	</div>
						 </el-image>
						<p class="infoeachl-num mainbg" v-if="item.unread > 0">{{ item.unread }}</p>
					</div>
					<div class="infoeachr">
						<p class="infoeachr-name ellipsis01">{{ item.realname }}</p>
						<p class="infoeachr-msg ellipsis01 mainColor" v-if="item.type == 'text'" v-html="item.lastContent"></p>
						<p class="infoeachr-msg ellipsis01 mainColor" v-if="item.type == 'webrtc'" v-html="item.lastContent"></p>
						<p class="infoeachr-msg ellipsis01 mainColor" v-if="item.type != 'text' && item.type != 'webrtc'">{{ item | chatSetLastContentfun }}</p>
					</div>
					<div class="infoeachtime" v-if="infodataac != item.user_id">{{ item.lastSendTime | sendTimeMd }}</div>
				</div>
			</div>
		</div>
		<!-- 公告 START -->
		<div class="rblock" v-if="isnotice">
			<div class="ointrtitle">
				<p class="ointrtitle-name">系统公告</p>
			</div>
			<div class="chbatblock marginAuto flex" style="background-color:#F7F7F7;overflow-y:auto;">
				<noticelist style="width:100%;"></noticelist>
			</div>
		</div>
		<!-- 公告 end -->
		<div class="rblock flex" v-if="!infodataacitem.user_id && !isnotice">
			<img class="nonephotoimg marginAuto" style="width:150px;" src="@/assets/logoh.png" alt="占位符" />
		</div>
		<div class="rblock" v-if="infodataacitem.user_id && !isnotice">
			<div class="ointrtitle">
				<p class="ointrtitle-name">{{ infodataacitem.realname || '' }}</p>
				<p class="ointrtitle-status flex">
					<span class="ointrtitle-statusd mainbg"></span>
					<span class="ointrtitle-statusx">{{ infodataacitem.is_online == 0 ? '离线':'在线' }}</span>
				</p>
			</div>
			<div class="chbatblock marginAuto flex">
				<div class="chbat">
					<div class="loadingicon" v-if="!topscrollis" style="height:20px;text-align:center;"><span class="el-icon-loading" style="font-size:22px;"></span></div>
					<div class="chbattop" ref="chbattopscroll" @click="collectemophotodelitem={}" @scroll="chatscrollbottom(true),isscroll=true">
						<div class="chbatorder" v-if="ordersendMsgdata.adverseid == infodataac">
							<div class="chbatordert flex">
								<span class="mainColor">{{ ordersendMsgdata.order_sn }}</span>
								<span class="mainColor">{{ ointstatedata[ordersendMsgdata.order_status] }}</span>
							</div>
							<div class="chbatorderb">
								<div class="chbatorderbname">{{ ordersendMsgdata.order_name }}</div>
								<div class="chbatorderbmsg flex" @click="ordershow = !ordershow">
									<p class="chbatorderbmsgtxt curpoin" :class="ordershow ? 'orderbshow':''">{{ ordersendMsgdata.design_need }}</p>
									<p class="chbatorderbmsgicon curpoin mainbg">
										<span class="el-icon-arrow-down" style="top:2px;" v-if="ordershow"></span>
										<span class="el-icon-arrow-up" v-if="ordershow == false"></span>
									</p>
								</div>
							</div>
						</div>
						<div class="chbatmsg" style="padding-bottom:50px;" v-if="chatdata.length > 0">
							<div class="chbatmsgmain" v-for="(item,index) in chatdata" :key="index">
								<!-- 别人 -->
								<div class="chbatmsgeach chbatmsgl flex" v-if="item.fromUser.user_id != userInfo.user_id">
									<div class="chbatmsghead" v-if="item.type != 'system'">
										<img class="chbatmsgheadimg" v-if="item.fromUser.avatar" :src="item.fromUser.avatar" alt="自己头像" />
										<img class="chbatmsgheadimg" v-if="!item.fromUser.avatar" src="@/assets/logosvg.png" alt="自己头像" />
									</div>
									<div class="chbatmsgsj-sysmsg" v-if="item.type == 'system'">
										<span v-html="item.content"></span>
									</div>
									<div class="chbatmsgdata" v-if="item.type != 'system'">
										<div class="chbatmsgsj-t" v-if="item.type != 'system'">
											<span style="margin:0 5px;">{{ item.fromUser.realname }}</span>
											<span class="chbatmsgsj-ttime">{{ item.sendTime | sendTimeYMdhis }}</span>
										</div>
										<div class="chbatmsgsj-msg" style="border-top-left-radius: 0;">
											<div class="chbatmsgsj-text" v-if="item.type == 'webrtc'">
												<span v-html="item.content"></span>
											</div>
											<div class="chbatmsgsj-text" v-if="item.type == 'text'">
												<span v-html="item.content"></span>
											</div>
											<div class="chbatmsgsj-image" v-if="item.type == 'emoticon'" @contextmenu.prevent="openContextcollectemo($event,item)">
												<img :src="apifun.URLimg + item.content" alt="表情" />
												<div class="rightVisible" v-if="collectemophotodelitem.file_id"
												:style="{
													'left':emox+10+'px',
													'top':emoy+10+'px'
												}">
													<li class="rightVisibleeach curpoin" @click="collectbremofun()">收藏</li>
												</div>
											</div>
											<div class="chbatmsgsj-image" v-if="item.type == 'image'" @contextmenu.prevent="openContextcollectemo($event,item)">
												<img :src="apifun.URLimg + item.content" alt="图片" />
												<div class="rightVisible" v-if="collectemophotodelitem.file_id"
												:style="{
													'left':emox+10+'px',
													'top':emoy+10+'px'
												}">
													<li class="rightVisibleeach curpoin" @click="downloadfun(item.contact,'图片')">下载</li>
												</div>
											</div>
											<div class="chbatmsgsj-Audio flex curpoin" @click="audiobf(item,index)" v-if="item.type == 'voice'">
												<span class="chbatmsgsj-Audioicon">
													<img class="chbatmsgsj-Audioiconimg" v-if="audioac != item.content" src="@/assets/chat/audioicon.png" alt="未播放" />
													<img class="chbatmsgsj-Audioiconimg" v-if="audioac == item.content" src="@/assets/chat/audioiconac.png" alt="播放中" />
												</span>
												<span class="chbatmsgsj-Audiotxt" :class="audioac == item.content ? 'mainColor':''">{{ item.extends.duration }}</span>
											</div>
											<div class="chbatmsgsj-file flex curpoin" v-if="item.type == 'file'" @contextmenu.prevent="openContextcollectemo($event,item)">
												<div class="downfileicon">
													<img class="" src="@/assets/fun/fileicon.png" alt="" />
												</div>
												<div class="downfilemsg">
													<div class="downfilemsgname ellipsis01">{{ item.fileName }}</div>
													<div class="downfilemsg-rl">{{ item.fileSize | getFileSize }}</div>
												</div>
												<div class="downicon">
													<span class="el-icon-download"></span>
												</div>
												<div class="rightVisible" v-if="collectemophotodelitem.file_id"
												:style="{
													'left':emox+10+'px',
													'top':emoy+10+'px'
												}">
													<li class="rightVisibleeach curpoin" @click="downloadfun(item.content,item.fileName)">下载</li>
												</div>
											</div>
											<div class="chbatmsgsj-file flex curpoin" v-if="item.type == 'video'" @click="playvideourl = item.content,playvideois=''">
												<!-- <video width="450" height="400" controls :src="item.content"></video> -->
												<div class="downfileicon">
													<img width="32" height="34" :src="apifun.URLimg + item.extUrl" alt="视频" />
												</div>
												<div class="downfilemsg">
													<div class="downfilemsgname ellipsis01">{{ item.fileName }}</div>
													<div class="downfilemsg-rl">{{ item.fileSize | getFileSize }}</div>
												</div>
												<div class="downicon" style="font-size:24px;">
													<span class="el-icon-video-play"></span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- 自己 -->
								<div class="chbatmsgeach chbatmsgr flex" v-if="item.fromUser.user_id == userInfo.user_id">
									<div class="chbatmsgdata clearfix">
										<div class="chbatmsgsj-t" style="text-align:right;">
											<span class="chbatmsgsj-ttime">{{ item.sendTime | sendTimeYMdhis }}</span>
											<span style="margin:0 5px;">{{ userInfo.realname }}</span>
										</div>
										<div class="chbatmsgsj-msg fr" style="border-top-right-radius: 0;">
											<div class="chbatmsgsj-text" v-if="item.type == 'webrtc'">
												<span v-html="item.content"></span>
											</div>
											<div class="chbatmsgsj-text" v-if="item.type == 'text'">
												<span v-html="item.content"></span>
											</div>
											<div class="chbatmsgsj-image" v-if="item.type == 'emoticon'">
												<img :src="apifun.URLimg + item.content" alt="表情" />
											</div>
											<div class="chbatmsgsj-image" v-if="item.type == 'image'" @contextmenu.prevent="openContextcollectemo($event,item)">
												<img :src="apifun.URLimg + item.content" alt="图片" />
												<div class="rightVisible" v-if="collectemophotodelitem.file_id"
												:style="{
													'left':emox+10+'px',
													'top':emoy+10+'px'
												}">
													<li class="rightVisibleeach curpoin" @click="downloadfun(item.content,'图片')">下载</li>
												</div>
											</div>
											<div class="chbatmsgsj-Audio flex curpoin" style="justify-content:flex-end;" @click="audiobf(item,index)" v-if="item.type == 'voice'">
												<span class="chbatmsgsj-Audiotxt" style="margin-right: 8px;" :class="audioac == item.content ? 'mainColor':''">{{ item.extends.duration }}</span>
												<span class="chbatmsgsj-Audioicon">
													<img class="chbatmsgsj-Audioiconimg" v-if="audioac != item.content" src="@/assets/chat/audioicon.png" style="transform: rotate(180deg);" alt="未播放" />
													<img class="chbatmsgsj-Audioiconimg" v-if="audioac == item.content" src="@/assets/chat/audioiconac.png" alt="播放中" />
												</span>
											</div>
											<div class="chbatmsgsj-file flex curpoin" v-if="item.type == 'file'" @contextmenu.prevent="openContextcollectemo($event,item)">
												<div class="downfileicon" style="width:27px;">
													<img class="" src="@/assets/fun/fileicon.png" alt="" />
												</div>
												<div class="downfilemsg">
													<div class="downfilemsgname ellipsis01">{{ item.fileName }}</div>
													<div class="downfilemsg-rl">{{ item.fileSize | getFileSize }}</div>
												</div>
												<div class="downicon">
													<span class="el-icon-download"></span>
												</div>
												<div class="rightVisible" v-if="collectemophotodelitem.file_id"
												:style="{
													'left':emox+10+'px',
													'top':emoy+10+'px'
												}">
													<li class="rightVisibleeach curpoin" @click="downloadfun(item.content,item.fileName)">下载</li>
												</div>
											</div>
										</div>
									</div>
									<div class="chbatmsghead">
										<img class="chbatmsgheadimg" v-if="userInfo.avatar" :src="userInfo.avatar" alt="自己头像" />
										<img class="chbatmsgheadimg" v-if="!userInfo.avatar" src="@/assets/logosvg.png" alt="自己头像" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="chbatsend" style="height:120px;">
						<div class="chbatsendt flex">
							<!-- 表情start -->
							<div class="diaemojibgfg" @click="emojiis=false" v-if="emojiis"></div>
							
							<div class="diaemoji" v-if="emojiis" @click="emophotodelid = ''">
								<div class="diaemojit">
									<div class="diaemojiticon diaemojitmain" v-if="isemo == 1">
										<span class="diaemojiticon-icon curpoin" 
										v-for="(item,index) in emojidata" :key="index"
										@click="diaemojiticonfun(item)"
										>{{ item }}</span>
									</div>
									<div class="diaemojitphoto diaemojitmain clearfix" v-if="isemo == 2">
										<div class="diaemojitphotoimage fl">
											<el-upload
											  class="diaemojitphotoimage-upload"
											  :show-file-list="false"
											  :action="apifun.hrefURL + '/pc/upload/upload'"
											  name="file"
											  :headers="token"
											  :on-success="uploademocollectSuccess"
											  :before-upload="uploadfile.fileImg">
											  <span class="diaemojitphotoimage-icon el-icon-plus"></span>
											</el-upload>
										</div>
										<div class="diaemojitphotoimage fl" 
										@contextmenu.prevent="openContextMenu($event,item)"
										@click="sendemophotofun(item)"
										v-for="(item,index) in emophotodata" :key="index"
										>
											<img class="diaemojitphotoimage-img" :src="apifun.URLimg + item.url" alt="表情图" />
										</div>
										<div class="emoVisible" v-if="emophotodelid != ''"
										:style="{
											'left':emox+10+'px',
											'top':emoy+10+'px'
										}">
											<li class="emoVisibleeach curpoin" @click="delemofun()">删除</li>
										</div>
									</div>
								</div>
								<div class="diaemojib flex">
									<div class="diaemojibeach curpoin" :class="isemo == 1 ? 'acdiaemojibeach':''" @click="tagemofun(1)">
										<img src="@/assets/chat/chat1.png" alt="表情" />
									</div>
									<div class="diaemojibeach curpoin" :class="isemo == 2 ? 'acdiaemojibeach':''" @click="tagemofun(2)">
										<img style="width:23px;height:23px;" src="@/assets/chat/collect.png" alt="收藏表情" />
									</div>
								</div>
							</div>
							<!-- 表情END -->
							<div class="chbatsendtl flex">
								<img class="curpoin" src="@/assets/chat/chat1.png" @click="emojiis=true,isemo=1" alt="表情" style="width:24px;height:24px;" />
								<img class="curpoin" src="@/assets/chat/chat2.png" @click="sendphotois=true;" alt="图片" style="width:18px;height:18px;margin-top:2px;" />
								<img class="curpoin" src="@/assets/chat/chat3.png" @click="voicefun()" alt="语音" style="width:24px;height:24px;" />
								<img class="curpoin" src="@/assets/chat/chat4.png" @click="uploadsjxqis=true" alt="文件" style="width:22px;height:22px;margin-top: 2px;" />
								<img class="curpoin" @click="isrecord = !isrecord" src="@/assets/chat/chat5.png" alt="记录" style="width:22px;height:22px;margin-top:1px;" />
							</div>
							<div class="chbatsendtr curpoin" @click="sendmsgfun()">
								<span class="chbatsendtr-z">使用Ctrl+Enter换行</span>
								<span class="chbatsendtr-s">
									<img class="chbatsendtr-sp" src="@/assets/chat/chatenter.png" alt="发送" />
								</span>
							</div>
						</div>
						<div class="chbatsendb">
							<textarea class="chbatsendbtxt" v-model="sendtxt" @keydown.enter="sendmsgfun" placeholder="请输入"></textarea>
						</div>
					</div>
				</div>
				<chatrecord v-if="isrecord" :orderid="infodataacitem.order_id" :toContactId="infodataac"></chatrecord>
			</div>
		</div>
		<el-dialog  
		  title="上传文件"
		  :visible.sync="uploadsjxqis"
		  width="400px"
		  top="70px"
		  :before-close="uploadClosefun"
		  :modal-append-to-body="false">
			<el-upload
			  id="uploadfliexq"
			  drag
			  multiple
			  :show-file-list="false"
			  :action="apifun.hrefURL + '/pc/Upload/fileUpload'"
			  name="file"
			  :headers="token"
			  :on-success="uploadfileSuccess"
			  :before-upload="uploadfile.filenotmp4"
			  >
			  <i class="el-icon-upload"></i>
			  <div class="el-upload__text">将文件拖到此处，或<em class="mainColor">点击上传</em></div>
			  <div class="el-upload__tip" slot="tip">上传的文件不超过{{ uploadfile.fileSizenum }}M</div>
			</el-upload>
			<div class="flielist">
				<div class="flieitem flex" v-if="sendfile.name">
					<div class="flieiteml">
						<span class="flieitemlicon el-icon-document"></span>
						<span class="flieitemlname">{{ sendfile.name }}</span>
					</div>
					<div class="flieitemr curpoin" @click="sendfile={}">
						<span class="el-icon-delete"></span>
					</div>
				</div>
			</div>
			<div class="replacebtn" style="margin-top:20px;">
			   <el-button class="replacebtneach mainbg" @click="sendfliefun()">完成</el-button>
			</div>
		</el-dialog>
		<!-- 发送图片 -->
		<el-dialog  
			id="sendphoto"
		  title="选择图片"
		  :visible.sync="sendphotois"
		  width="350px"
		  top="100px"
		  :before-close="diaClosefun"
		  :modal-append-to-body="false">
		   	<div class="sepaypathinput flex">
				<el-upload
				  class="upload-demo"
				  :show-file-list="false"
				  :action="apifun.hrefURL + '/pc/upload/upload'"
				  name="file"
				  :headers="token"
				  :on-success="sendphotoSuccess"
				  :before-upload="uploadfile.fileImg"
				  >
					<div class="sepaypathinputphoto flex">
						<span class="sepaypathinputphotoicon marginAuto el-icon-picture-outline"></span>
						<img class="sepaypathinputphotoimg" v-if="sendphoto.src" :src="apifun.URLimg + sendphoto.src" alt="发送图片" />
					</div>
				</el-upload>
			</div>
		   <div class="replacebtn">
			   <el-button class="replacebtneach" style="background-color:#999999;" @click="sendphotois=false">取消</el-button>
			   <el-button class="replacebtneach mainbg" @click="sendphotofun()">提交</el-button>
		   </div>
		</el-dialog>
		<!-- 播放视频 -->
		<el-dialog  
			id="playvideo"
		  title="播放视频"
		  :visible.sync="playvideois"
		  width="490px"
		  top="80px"
		  :before-close="diaClosefun"
		  :modal-append-to-body="false">
		   <div class="videoclass">
			   <video width="450" height="400" controls :src="apifun.URLimg + playvideourl"></video>
		   </div>
		</el-dialog>
		<!-- 语音通话 -->
		<voiceblock ref="fvoiceref" v-if="fvoiceis" :infodataacitem="infodataacitem" :answer="answer" :statustype="statustype"  @fvoiceisfun="fvoiceisfun"></voiceblock>
		<Socket ref="socket" @appendMessage="appendMessage"></Socket>
	</div>
</template>

<script>
	import RTCDetect from 'rtc-detect';
	import Socket from '@/components/chat/socket';
	import chatrecord from '@/components/chat/chatrecord';
	import voiceblock from '@/components/chat/voiceblock';
	import noticelist from '@/components/chat/noticelist';
	import { getMsgType,beforeTime,chatSetLastContent,emoji } from '@/utils/publicfun';
	import utils from '@/utils/utils';
	import { getFileSize, getFileExtImg,download } from "@/utils/file";
	
	export default {
		components:{
			Socket,
			chatrecord,
			voiceblock,
			noticelist
		},
		props:{
			bookSendMsgdata:{  // 通讯录
				type:Object,
				default:{}
			},
			ordersendMsgdata:{  // 订单
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				token:{
					Authorization:localStorage.getItem('token')
				},
				ointstatedata:['未分配', '进行中', '已定稿', '死单', '暂停', '退款中', '已退款'],
				roleId:'',
				page:1,
				limit:20,
				userInfo:{},
				searchtxt: '',
				sendtxt:'',
				sendfile:{},
				sendphotois:false,   //  发送图片
				sendphoto:{},
				contacts: [],  //  处理后的列表
				infodataac: '',  // 对方user_id
				infodataacitem:{
					// user_id:111
				},
				ordermsg:{},   // order
				ordershow:false,
				chatdata:[],  // 聊天数据
				isrecord:false,  // 打开记录
				emojidata:emoji(),
				uploadsjxqis:false,
				audioac:'',  // 语音播放
				emojiis:false,  // 表情弹窗部分
				isemo:1,
				emox:0,
				emoy:0,
				emophotodata:[],
				emophotodelid:'',  // 记录删除
				collectemophotodelitem:{},  // 记录收藏
				playvideois:false,
				playvideourl:'',
				topscrollis:true,  // 上划加载聊天记录
				isdataScroll:false,    // 先执行数据渲染在滚动到指定位置
				isscroll:false,
				fvoiceis:false,  // 音频
				newmsgdata:{},
				statustype:1,
				isnotice:false,
				answer:{
					extends:{
						event:''
					}
				}
			}
		},
		mounted() {
			this.roleId = this.$store.state.roleId;
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
			this.getfriend();
		},
		methods: {
			initContacts(data) {  // 处理聊天列表数据
				let userInfo = JSON.parse(localStorage.getItem('userInfo'));
				// console.log('--处理的数据',data);
				let contacts = utils.sortContacts(data);
				let topContacts = [];
				let otherContacts = [];
				contacts.forEach((item, index) => {
					// item = chatSetLastContent(item);
					if (item.index == '群聊') {
						item.index = "#";
					}
					if (item.is_top == 1) {
						topContacts.push(item)
					} else {
						otherContacts.push(item)
					}
				})
				// console.log('otherContacts',otherContacts)
				this.contacts = topContacts.concat(otherContacts);
				otherContacts.forEach((item,index)=>{
					if(item.user_id == this.infodataac){
						if(!item.fromUser){
							item.fromUser={
								id : userInfo.user_id,
							}
							item.msg_id = 0;
						};
						if(!this.chatdata.some(obj => obj.msg_id === item.msg_id)){ // 去除别人多余
							this.chatdata.push(item);
						}
						this.chatdata = this.chatdata.filter((obj)=>{  // 去除自己多余
						    return obj['msg_id'] != 0
						});
						setTimeout(()=>{
							if(this.infodataac){
								this.isscroll = false;
								this.chatscrollbottom()
							}
						},0)
					}
				});
				localStorage.setItem('allContacts', JSON.stringify(this.contacts));  // socket中需要用到（新消息提示音）
			},
			appendMessage(res){  // 新消息 (fromUser:发送方信息)
				let data = res.data;
				this.newmsgdata = data;
				console.log('推送1',data)
				// 语音开始
				if(data.type == 'webrtc'){
					console.log('推送2',data)
					this.answer = data;
					if(data.extends.event == 'busy' || data.extends.event == 'hangup'){
						
					};
					if(data.extends.event == 'calling'){
						this.statustype = 2;
						this.fvoiceis = true;
					};
				};
				// 语音结束
				let userInfo = JSON.parse(localStorage.getItem('userInfo'));
				let toUser = data.fromUser.id;
				let contact = this.$refs.socket.getContact(toUser);
				if (toUser == userInfo.user_id) { // 自己发的
					contact = data;
				};
				if (data.toContactId == 'system') {  //  系统消息；[后台放在对方消息里；估此处可不写]
					
				}else {  // 非系统消息
					// addUnread = data.fromUser.id == userInfo.user_id ? 0 : 1;  // 新消息个数
					if (contact) {  // 此人已经在列表中了-更新信息
						let addcontact = data;
						addcontact.lastContent = data.content;
						addcontact.lastSendTime = data.sendTime;
						addcontact.id = data.toContactId;  // 发送方id
						this.updateContacts(addcontact);
					}else{  // 此人不在聊天列表中-更新联系人+更新数据
						let newContact = {
							id: data.toContactId,
							avatar: data.fromUser.avatar,
							displayName: data.fromUser.realname,
							email:data.fromUser.email,
							index:'p',  // 未知
							is_at: data.at,
							is_group: data.is_group,
							is_notice:1,   // 未知
							is_online:'',   // 未知
							is_top: 0,   // 未知
							lastContent: data.content,
							lastSendTime: data.sendTime,
							last_login_ip:data.fromUser.last_login_ip,
							location:'中国',
							name_py:data.fromUser.name_py,
							realname:data.fromUser.realname,
							setting:data.fromUser.setting,
							type:data.type,
							user_id:data.user_id,
							dep_id: 0,
						};
						this.appendContacts(newContact);
					};
					// 如果在后台运行,不是自己发的，并且开启了通知，就创建通知栏
					// if(data.fromUser.id != userInfo.user_id && contact.is_notice == 1){
						
					// }
				}
			},
			appendContacts(data){  // 有新的联系人发消息；（添加新的联系人）
				// console.log('这里1111111',data)
				const contacts = this.contacts;
				const contact = contacts.filter(item => item.id == data.id);     // 检查是否有该联系人,有就更新,没有就增加
				if (contact.length > 0) {
					this.updateContacts(data);
				}else{
					contacts.push(data);
					this.initContacts(contacts);
				}
			},
			updateContacts(res){  // 更新联系人
			// console.log('这里2222222',res)
				const contacts = this.contacts;
				contacts.forEach((item, index) => {
					if (item.id == res.id) {
						contacts[index] = Object.assign(item, res);
					}
				})
				// if(res.id == this.userInfo.user_id){
				// 	contacts[0] = Object.concat(res);
				// };
				this.initContacts(contacts);
			},
			// ------基础
			infosefun(item) { // 选择好友
				this.isnotice = false;
				if(item){
					this.infodataac = item.user_id;
					this.infodataacitem = item;
				}
				this.audioac='';
				
				this.isrecord = false;
				this.page = 1;
				this.chatdata=[];
				this.isdataScroll=false;
				this.isscroll=false;
				this.newmsgdata = {};
				if(this.infodataac == item.user_id){
					item.unread = 0
				};
				this.getContacts();
			},
			noticefun(){  // 公告
				this.isnotice = true;
				this.infodataac = '';
				this.infodataacitem = {};
				
			},
			sendmsgfun(e){   // 发送文本消息
				if(this.sendtxt == ''){
					this.$message({
					  message: '不能发送空白信息',
					  type: 'warning'
					});
					return false
				};
				if(!e){
					e = {
						ctrlKey:'',
						keyCode:''
					}
				}
				if(e.ctrlKey && e.keyCode == 13){
					this.sendtxt += '\n';
				}else{
					this.sendmsgajaxfun({
						type:'text',
						content:this.sendtxt
					});
				}
			},
			sendemophotofun(item){  // 发送表情图片
				this.sendmsgajaxfun({
					type:'emoticon',
					file_id:item.file_id,
					content:item.url
				})
			},
			sendphotoSuccess(res,file){
				let sendData = {
					raw:file.raw,  // name、path、size、type、uid
					name:file.name,
					resdata:res.data,
					id:res.data.file_id,
					src:res.data.src
				};
				if(res.code == 200){
					this.sendphoto = sendData
				}else{
					this.$message({
					  message: res.msg,
					  type: 'warning'
					});
				}
			},
			sendphotofun(){ // 发送图片消息
				if(!this.sendphoto.id){
					this.$message({
					  message: '不能发送空白信息',
					  type: 'warning'
					});
					return false
				};
				this.sendmsgajaxfun({
					type:"image",
					content:this.sendphoto.src,
					file_id:this.sendphoto.id
				})
			},
			voicefun(){  //  语音通话
				const detect = new RTCDetect();
				let Supported = detect.getAPISupported();
				if(Supported.isWebRTCSupported){  // 支持webRTC
					detect.getDevicesAsync().then((res)=>{
						if(res.hasMicrophonePermission && res.microphones.length > 0){  // 判断有麦克风设备
							if(res.speakers.length > 0){  //  判断有扬声器设备
								this.fvoiceis = true;
								let infodataacitem = this.infodataacitem;
								this.infodataacitem = infodataacitem;
								this.statustype = 1;
							}else{
								this.$message({
								  message: '未检测到扬声器设备，请检查设备或转至手机继续语音',
								  type: 'warning'
								});
							}
						}else{
							this.$message({
							  message: '未检测到麦克风，请检查设备或转至手机继续语音',
							  type: 'warning'
							});
						}
					});
				}else{
					this.$message({
					  message: '您的浏览器暂不支持音频模块；请升级浏览器再试',
					  type: 'warning'
					});
				}
				// if(Supported.isWebSocketSupported){
				// 	console.log("支持webSocket")
				// }
			},
			fvoiceisfun(userchat){  // 自己挂断组装数据（同sendmsgajaxfun）
				this.fvoiceis = false;
				if(userchat){
					this.chatdata.push(userchat);
				}
			},
			audiobf(item,index){  // 播放语音
				if(this.audioac != ''){
					this.audioac='';
					this.$refs.chatfAudios.pause();
					return false
				}
				this.audioac = item.content;
				// this.$refs.chatfAudios.play();
			},
			chatfAudioendfun(){
				this.audioac = '';
				this.$refs.chatfAudios.pause();
			},
			uploadfileSuccess(res,file){  //上传文件成功
				let sendData = {
					raw:file.raw,  // name、path、size、type、uid
					name:file.name,
					id:res.data
				};
				if(res.code == 200){
					this.sendfile = sendData
				}else{
					this.$message({
					  message: res.msg,
					  type: 'warning'
					});
				}
			},
			sendfliefun(){  // 发送文件
				if(!this.sendfile.id){
					this.$message({
					  message: '不能发送空白信息',
					  type: 'warning'
					});
					return false
				};
				this.sendmsgajaxfun({
					type:"file",
					content:this.sendfile.name,
					file_id:this.sendfile.id
				})
			},
			sendmsgajaxfun(sendData){  //发送数据
				sendData.id = utils.getUuid();
				sendData.toContactId=this.infodataac;
				sendData.order_id = this.infodataacitem.order_id || 0;
				this.apifun.$post('/pc/im/sendMessage',sendData).then((res)=>{
					// console.log('res',res)
					if(res.code ==  200){
						this.chatdata.push(res.data);
						this.sendtxt=''; // 文本
						this.emojiis = false;  // 表情图
						this.sendfile = {};
						this.uploadsjxqis = false;  // 文件
						this.sendphotois = false;  // 图片
						this.sendphoto={}
					}
				});
			},
			getContacts(oldscroll){  // 聊天记录
				let sendData = {
					toContactId:this.infodataac,
					is_group:0,
					type:'',
					is_at:'0',  // 是否@ 0不是 1是
					keywords:'',
					page:this.page,
					limit:this.limit,
					last_id:'',
					directional:0  ,// 0下拉加载以前的消息 1上拉加载以后的消息
					order_id:this.infodataacitem.order_id || 0
				};
				this.apifun.$post('/pc/im/getMessageList',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.topscrollis=true;
						let datas = res.data;
						let chatdata = datas.data.reverse();
						if(chatdata.length <= 0){
							this.page--
							return false;
						}
						this.chatdata = [...chatdata,...this.chatdata];
						setTimeout(()=>{
							if(this.page == 1){
								this.isscroll = false;
								this.isdataScroll=true;
								this.chatscrollbottom()
							}else{
								let chbattopscroll = this.$refs.chbattopscroll;
								chbattopscroll.scrollTop = chbattopscroll.scrollHeight - oldscroll;
							}
						})
					}
				})
			},
			getfriend(){  // 获取好友列表
				let sendData = {
					search:this.searchtxt
				};
				this.apifun.$post('/pc/im/getContacts',sendData).then((res)=>{
					if(res.code ==  200){
						let infodataall = res.data;
						let infodata = infodataall.filter(obj=>obj.lastContent != '');
						this.$store.state.contactList = infodata;
						if(!this.bookSendMsgdata.user_id && !this.ordersendMsgdata.user_id){
							this.initContacts(infodata);
							this.infodataac = '';
							this.infodataacitem = {};
							return false;
						};
						// 通讯进入
						let bookSendMsgdata = this.bookSendMsgdata;
						if(bookSendMsgdata.user_id){
							let acarr = infodata.filter(obj => obj.user_id == bookSendMsgdata.user_id);
							this.infodataac = bookSendMsgdata.user_id;
							this.infodataacitem= {
								user_id:bookSendMsgdata.user_id,
								order_id : 0,
							}
							this.getContacts();
							if(acarr.length > 0){ // 有
								this.initContacts(infodata);
							}else{
								this.addgetfriend(infodata,0) //列表+人
							}
						};
						// 订单进入
						let ordersendMsgdata = this.ordersendMsgdata;
						if(ordersendMsgdata.user_id){
							if(ordersendMsgdata.adverseid == ordersendMsgdata.user_id){  // 用户
								let acarr = infodata.filter(obj => obj.user_id == ordersendMsgdata.user_id);
								this.infodataac = ordersendMsgdata.user_id;
								this.infodataacitem= {
									user_id: ordersendMsgdata.user_id,
									order_id : ordersendMsgdata.id
								}
								this.getContacts();
								if(acarr.length > 0){ // 有
									this.initContacts(infodata);
								}else{
									this.addgetfriend(infodata,ordersendMsgdata.id) //列表+人
								}
							}else{   // 设计
								let acarr = infodata.filter(obj => obj.user_id == ordersendMsgdata.design_id);
								this.infodataac = bookSendMsgdata.design_id;
								this.infodataacitem= {
									user_id:bookSendMsgdata.design_id,
									order_id : ordersendMsgdata.id
								}
								this.getContacts();
								if(acarr.length > 0){ // 有
									this.initContacts(infodata);
								}else{
									this.addgetfriend(infodata,ordersendMsgdata.id) //列表+人
								}
							}
						};
					}
				})
			},
			addgetfriend(infodata,orderid){
				let bookSendMsgdata = this.bookSendMsgdata;
				if(bookSendMsgdata.user_id){
					let additem = {
						avatar:bookSendMsgdata.avatar,
						realname:bookSendMsgdata.realname,
						user_id:bookSendMsgdata.user_id,
						role_id:bookSendMsgdata.role_id,
						type:'text',
						lastContent:'',
						order_id:orderid
					}
					infodata.unshift(additem)
					this.infodataac = bookSendMsgdata.user_id;
					this.infodataacitem = additem;
					this.initContacts(infodata);
					return false
				};
				let ordersendMsgdata = this.ordersendMsgdata;
				if(ordersendMsgdata.user_id){
					let additem = {};
					if(ordersendMsgdata.adverseid == ordersendMsgdata.user_id){   // 用户
						additem = {
							avatar:ordersendMsgdata.user_avatar,
							realname:ordersendMsgdata.user_name,
							user_id:ordersendMsgdata.user_id,
							role_id:5,
							type:'text',
							lastContent:'',
							order_id:orderid
						}
					}else{  // 设计
						additem = {
							avatar:ordersendMsgdata.design_avatar,
							realname:ordersendMsgdata.design_name,
							user_id:ordersendMsgdata.design_id,
							role_id:8,
							type:'text',
							lastContent:'',
							order_id:orderid
						}
					}
					infodata.unshift(additem)
					this.infodataac = ordersendMsgdata.adverseid;
					this.infodataacitem = additem;
					this.initContacts(infodata);
					return false
				}
			},
			diaemojiticonfun(item){  // 选择表情
				this.emojiis = false;
				this.sendtxt = this.sendtxt+item;
			},
			openContextMenu(event,item,index){  // 右击显示删除
				this.emophotodelid = item.file_id;  // 删除id
				this.emox = event.clientX;
				this.emoy = event.clientY;
			},
			openContextcollectemo(event,item){  // 右击展示功能弹窗
				this.collectemophotodelitem = item;
				this.emox = event.clientX;
				this.emoy = event.clientY;
			},
			tagemofun(type){  // 收藏表情列表
				if(type == this.isemo)return false;
				this.emophotodelid = '';
				this.isemo=type;
				if(type == 2){
					this.apifun.$post('/pc/upload/getCollectImgList',{}).then((res)=>{
						// console.log(res)
						if(res.code ==  200){
							this.emophotodata = res.data;
						}
					})
				}
			},
			uploademocollectSuccess(res,file){  // 上传收藏表情
				this.emophotodelid = '';
				if(res.code == 200){
					let datas = res.data;
					this.collectemofun({
						file:datas.src,
						file_id:datas.file_id,
					})
				}else{
					this.$message({
					  message: res.msg,
					  type: 'warning'
					});
				}
			},
			collectbremofun(){  //  收藏别人表情
				this.collectemofun({
					file:this.collectemophotodelitem.content,
					file_id:this.collectemophotodelitem.file_id,
				})
			},
			collectemofun(sendData){  //  收藏表情
				this.apifun.$post('/pc/upload/collectImg',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
							message: '收藏成功',
							type: 'success'
						});
						this.emophotodata.unshift({
							"file_id":sendData.file_id,
							"url": sendData.file
						})
					}
				})
			},
			delemofun(){  //  删除表情
				let sendData = {
					file_id:this.emophotodelid
				};
				let emophotodelid = this.emophotodelid;
				this.apifun.$post('/pc/upload/delCollectImg',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.emophotodata.forEach((item,index)=>{
							if(item.file_id == emophotodelid*1){
								this.emophotodata.splice(index,1);
							}
						})
						this.emophotodelid = '';
					}
				})
			},
			diaClosefun(){
				this.sendphotois = false;  // 发送图片
				this.playvideois = false;
			},
			// ---------聊天基础函数
			chatscrollbottom(toptype){
				let chbattopscroll = this.$refs.chbattopscroll;
				if(this.isscroll){
					let topscroll = chbattopscroll.scrollTop;
					if(topscroll < 20 && this.topscrollis){
						this.topscrollis=false;
						this.page++
						if(this.isdataScroll){
							this.getContacts(chbattopscroll.scrollHeight)
						}
					}
				}else{
					chbattopscroll.scrollTop = chbattopscroll.scrollHeight;
				}
			},
			uploadClosefun(){  // 上传文件取消
				this.uploadsjxqis = false;
			},
			downloadfun(src,name){
				download(src,name)
			},
		},
		filters: {
			sendTimeYMdhis(value){
				return utils.date('y/m/d H:i:s',value);
			},
			sendTimeMd(value){
				return utils.date('m/d',value);
			},
			getFileSize(value){
				return utils.getFileSize(value)
			},
			chatSetLastContentfun(value){
				return chatSetLastContent(value)
			}
		},
		computed:{
			infodata(){
				let index=0;  //0=所有  1=未读  2 -@我
				let contactList = [];
				if(index==1){
					contactList = this.contacts.filter(obj => obj.unread>0);
				}else if(index==2){
					contactList = this.contacts.filter(obj => obj.is_at>0);
				}else{
					// contactList = this.contacts.filter(obj => obj.lastContent);
					contactList = this.contacts.filter((obj)=>{
						return obj.lastContent || obj.role_id
					});
				}
				let allunreadnum = 0;
				contactList.forEach((item)=>{
					if(this.infodataac == item.user_id){
						item.unread = 0
					}else{
						if(this.newmsgdata.fromUser){
							if(this.newmsgdata.fromUser.user_id == item.user_id){
								++item.unread
							}
						}
					}
					allunreadnum += item.unread;
				})
				this.$store.state.allunreadnum = allunreadnum;
				// console.log('shuju--',contactList)
				return contactList;
			}
		},
	}
</script>
<style>
	#information .infosearch-input .el-input__inner{
		background-color: #FFF6F1;
		height:36px;
		line-height: 36px;
	}
	#information .infosearch-input .el-input__inner:focus{
		border-color:#FF5E03;
	}
	#sendphoto .el-dialog__body{
		padding: 0 20px 20px;
	}
</style>
<style scoped lang="scss">
	.information {
		position: relative;
		width: 180px;
		padding: 0 10px;
		height: 98vh;
		overflow-y: auto;
		border-right: 1px solid #EBEBEB;
	}
	.topfixed{
		position:sticky;
		z-index: 10;
		top: 0;
		left: 0;
		width:200px;
		background-color: #fff;
	}
	// 搜索
	.infosearch {
		position: fixed;
		top: 0;
		z-index:10;
		width: 180px;
		height:44px;
		background-color: #fff;

		.infosearch-input {
			width: 180px;
			height: 38px;
			border: none;
			margin-top: 5px;
			background-color: #FFF6F1;
		}
	}
	// 删除
	.rightVisible{
		position:fixed;
		z-index: 10;
		width:50px;
		border-radius:8px;
		.rightVisibleeach{
			width: 50px;
			text-align: center;
			line-height:24px;
			font-size:12px;
			color: #333;
			background-color: #fff;
		}
		.rightVisibleeach:hover{
			background-color:#E6E6E6;
		}
	}
	// 消息列表
	.infoblock {
		padding-top: 40px;
		margin-top: 20px;

		.infoeach {
			width: 170px;
			padding: 5px;
			margin-bottom: 20px;
			border-radius: 10px;

			.infoeachl {
				position: relative;
				width: 39px;
				height: 39px;

				.infoeachl-p {
					width:40px;
					height:40px;
					border-radius: 5px;
				}

				.infoeachl-num {
					position: absolute;
					right: -2px;
					bottom: -2px;
					width: 12px;
					height: 12px;
					line-height: 12px;
					text-align: center;
					color: #fff;
					font-size: 10px;
					border-radius: 50%;
					border: 3px solid #fff;
				}
			}

			.infoeachr {
				min-width: 90px;
				margin-left: 10px;

				.infoeachr-name {
					line-height: 24px;
					font-size: 14px;
					color: #333333;
				}

				.infoeachr-msg {
					line-height: 16px;
					font-size: 12px;
					color: var(--mainColor);
				}
			}

			.infoeachtime {
				color: #999999;
				font-size: 12px;
				margin-top: 30px;
			}
		}

		.activeinfoeach {
			background-color: var(--mainColor);

			.infoeachr {
				.infoeachr-name {
					color: #fff;
				}

				.infoeachr-msg {
					color: #fff !important;
				}
			}
		}
	}
	// 右部信息部分
	.rblock{
		position: relative;
		flex: 1;
		z-index: 99;
	}
	.ointrtitle{
		width:96%;
		padding:0px 2% 10px;
		height:40px;
		border-bottom: 1px solid #EEEEEE;
		color:#333333;
		font-size:14px;
		background-color: #fff;
		.ointrtitle-name{
			line-height: 20px;
			font-size: 14px;
			color: #333;
			font-weight: bold;
		}
		.ointrtitle-status{
			line-height:20px;
			.ointrtitle-statusd{
				width: 10px;
				height: 10px;
				margin-top:5px;
				border-radius: 50%;
			}
			.ointrtitle-statusx{
				color: #FF5E03;
				font-size:12px;
				margin-left:5px;
			}
		}
	}
	.chbatblock{
		position:relative;
		width: 99%;
		height:91vh;
		padding-top:10px;
		justify-content: space-between;
	}
	.chbat{
		position: relative;
		flex:1;
		.chbattop{
			width:100%;
			height:75vh;
			// min-height:74vh;
			// max-height:81vh;
			overflow-y:auto;
		}
		.chbatorder{
			position: sticky;
			top: 0;
			z-index: 10;
			width: 99%;
			background-color: var(--bgColor);
			border-radius: 10px;
			.chbatordert{
				width: 96%;
				padding:0 2%;
				line-height:40px;
				border-bottom: 1px solid #fff;
				justify-content: space-between;
				font-size:14px;
			}
			.chbatorderb{
				width: 96%;
				padding:10px 2%;
				.chbatorderbname{
					font-size: 14px;
					color: #333333;
					font-weight: bold;
				}
				.chbatorderbmsg{
					position: relative;
					font-size:12px;
					color: #333333;
					justify-content: space-between;
					margin-top:10px;
					.chbatorderbmsgtxt{
						width:96%;
						line-height: 20px;
						color: #333333;
						font-size: 12px;
						max-height:20px;
						overflow: hidden;
						transition-property: max-height;
						transition-duration:.6s;
					}
					.orderbshow{
						max-height:350px;
						overflow-y:scroll;
					}
					.chbatorderbmsgicon{
						position: relative;
						width: 12px;
						height: 12px;
						margin-top:5px;
						margin-left: 10px;
						text-align: center;
						line-height: 10px;
						color: #fff;
						font-size:10px;
						padding: 1px;
						border-radius:50%;
						span{
							position: absolute;
							left:2px;
						}
					}
				}
			}
		}
		.chbatmsg{
			width: 100%;
			margin-top: 10px;
			position: relative;
			.chbatmsgeach{
				width:100%;
				margin-bottom: 8px;
				.chbatmsgsj-sysmsg{
					line-height: 30px;
					padding: 0 10px;
					display: inline-block;
					margin:10px auto;
					text-align: center;
					font-size: 14px;
					color: #333;
					background-color:#F4F4F4;
					border-radius:10px;
				}
				.chbatmsghead{
					width: 35px;
					height: 35px;
					margin: 0 8px;
					.chbatmsgheadimg{
						width: 35px;
						height: 35px;
					}
				}
				.chbatmsgdata{
					position: relative;
					width:60%;
					.chbatmsgsj-t{
						font-size:12px;
						line-height:20px;
						margin-bottom:5px;
						.chbatmsgsj-ttime{
							color:#999;
						}
					}
					.chbatmsgsj-msg{
						display: inline-block;
						padding:7px;
						background-color:#F4F4F4;
						border-radius:10px;
						line-height:20px;
						.chbatmsgsj-text{
							font-size:14px;
							color:#333333;
							line-height: 20px;
						}
						.chbatmsgsj-image{
							max-width: 100%;
							height: auto;
							img{
								max-width: 100%;
								height: auto;
							}
						}
						.chbatmsgsj-Audio{
							position: relative;
							width:100px;
							height: 20px;
							border-radius: 10px;
							.chbatmsgsj-Audiofile{
								position: absolute;
								z-index: 10;
								width:100px;
								height: 20px;
							}
							.chbatmsgsj-Audioicon{
								width:20px;
								height: 20px;
								.chbatmsgsj-Audioiconimg{
									width:20px;
									height: 20px;
								}
							}
							.chbatmsgsj-Audiotxt{
								font-size:14px;
								color:#333333;
								line-height: 20px;
								margin-left:5px;
							}
						}
						.chbatmsgsj-file{
							width:200px;
							padding: 9px;
							border: 1px solid var(--mainColor);
							border-radius:10px;
							justify-content: space-between;
							.downfileicon{
								width: 34px;
								height: 34px;
								margin-top:2px;
								img{
									width:100%;
									height: 34px;
								}
							}
							.downfilemsg{
								width: 62%;
								.downfilemsgname{
									color: #777777;
									font-size: 14px;
									line-height: 20px;
								}
								.downfilemsg-rl{
									color: #777777;
									font-size: 10px;
									line-height: 20px;
								}
							}
							.downicon{
								font-size: 18px;
								line-height:40px;
								color:#999999;
							}
						}
					}
				}
			}
			.chbatmsgl{
				position:relative;
				left:0;
			}
			.chbatmsgr{
				position: relative;
				justify-content:flex-end;
			}
		}
	}
	.chbatsend{
		position:sticky;
		bottom:0;
		width:99%;
		padding: 8px 0;
		background-color:#F6F6F6;
		border-radius: 10px;
		.chbatsendt{
			position:relative;
			height: 25px;
			justify-content: space-between;
			// 表情部分 START
			.diaemojibgfg{
				position:fixed;
				left: 0;
				top:0;
				z-index:1;
				width: 100%;
				height: 100%;
				opacity:0;
				background-color:red;
			}
			.diaemoji{
				position: absolute;
				z-index: 2010;
				bottom:40px;
				left:-150px;
				z-index: 50;
				width: 500px;
				height: 300px;
				border-radius: 10px;
				background-color: #fff;
				box-shadow: 0 0 20px #cfd2d1;
				.diaemojit{
					width:96%;
					height:230px;
					padding:10px 2%;
					border-top-right-radius: 10px;
					border-top-left-radius:10px;
					.diaemojitmain{
						width: 100%;
						height:230px;
						overflow-y: auto;
						.diaemojiticon-icon{
							display: inline-block;
							padding: 5px;
						}
						.diaemojiticon-icon:hover{
							background-color:#E6E6E6;
							border-radius:5px;
						}
						.diaemojitphotoimage{
							display: flex;
							position: relative;
							width:50px;
							height: 50px;
							margin:5px;
							background-color:#E6E6E6;
							border-radius:5px;
							.diaemojitphotoimage-upload{
								position: absolute;
								left:0;
								top: 0;
								z-index: 1;
								width:55px;
								height: 55px;
								display: flex;
								.diaemojitphotoimage-icon{
									position: absolute;
									left: 50%;
									top: 50%;
									margin-top: -11px;
									margin-left: -11px;
									font-size: 18px;
									color: #333;
								}
							}
							.diaemojitphotoimage-img{
								margin: auto;
								z-index:2;
								max-width:100%;
								max-height:100%;
								border-radius:5px;
							}
						}
					}
				}
				.diaemojib{
					position: absolute;
					bottom: 0;
					width:96%;
					background-color:#fff;
					border-top: 1px solid #ccc;
					padding:10px 2% 5px;
					height:30px;
					line-height: 30px;
					border-bottom-left-radius: 10px;
					border-bottom-right-radius: 10px;
					.diaemojibeach{
						width:30px;
						height:30px;
						background-color: #fff;
						margin-left: 10px;
						border-radius:5px;
						display: flex;
						img{
							margin: auto;
							width:25px;
							height:25px;
						}
					}
					.acdiaemojibeach{
						background-color:#E6E6E6;
					}
				}
			}
					// 删除
			.emoVisible{
				position:fixed;
				z-index: 10;
				width:50px;
				border-radius:8px;
				.emoVisibleeach{
					width: 50px;
					text-align: center;
					line-height:24px;
					font-size:12px;
					color: #333;
					background-color: #fff;
				}
				.emoVisibleeach:hover{
					background-color:#E6E6E6;
				}
			}
			// 表情部分 END
			
			.chbatsendtl{
				img{
					margin: 0 5px;
				}
			}
			.chbatsendtr{
				position: relative;
				margin-right: 10px;
				width:130px;
				height: 25px;
				background-color: var(--bgColor);
				border-radius: 7px;
				padding: 0 9px;
				.chbatsendtr-z{
					font-size:12px;
					color:#FFA878;
				}
				.chbatsendtr-s{
					position: absolute;
					top:0;
					right: 0;
					width:25px;
					height:25px;
					background-color: var(--mainColor);
					border-radius:7px;
					display: flex;
					.chbatsendtr-sp{
						margin: auto;
						width:14px;
						height:14px;
					}
				}
			}
		}
		.chbatsendb{
			.chbatsendbtxt{
				width:96%;
				height:70px;
				margin-top:10px;
				padding: 10px 2%;
				border: none;
				outline: none;
				resize: none;
				background-color:#F6F6F6;
				color: #333;
				font-size: 14px;
			}
		}
	}
	// 弹窗
	.replacebtn{
		margin-top: 30px;
		display: flex;
		justify-content:flex-end;
		.replacebtneach{
			width:130px;
			height: 50px;
			border-radius: 10px;
			color: #fff;
			font-size:16px;
			margin-left: 25px;
		}
	}
	// 上传文件list
	.flielist{
		margin-top:10px;
		.flieitem{
			justify-content: space-between;
			line-height:30px;
			padding: 0 10px;
			border-radius: 5px;
			.flieiteml{
				.flieitemlicon{font-size:16px;}
				.flieitemlname{
					font-size: 14px;
					margin-left:8px;
				}
			}
			.flieitemr{
				width:30px;
				text-align: center;
				font-size:16px;
				color:#999;
				text-align: right;
			}
		}
		.flieitem:hover{
			background-color:#F7F7F7;
		}
	}
	// 上传图片
	.sepaypathinput{
		padding: 20px 0;
		.upload-demo{
			width: 240px;
			margin: auto;
			.sepaypathinputphoto{
				position: relative;
				width: 240px;
				height:240px;
				background-color:#F6F6F6;
				border-radius: 10px;
				.sepaypathinputphotoicon{
					font-size:40px;
					color:#999999;
				}
				.sepaypathinputphotoimg{
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.videoclass{
		width: 450px;
		height: 400px;
	}
</style>